<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form
          label-width="80px"
          ref="form"
          :model="form"
        >
          <!-- 顶部说明和按钮 -->
          <el-row style="padding-bottom:20px">
            <span style="font-size: 12px;color:pink;">说明：目前支持学科和关键字条件筛选</span>
            <el-button
              class="filter-item fr"
              size="small"
              style="margin-left: 10px;"
              type="success"
              icon="el-icon-edit"
              @click="$router.push('new')"
            >新增试题</el-button>
          </el-row>
          <!-- 表单区域 -->
          <el-row :gutter="7">
            <el-col :span="6">
              <el-form-item
                label="学科"
                prop="subjectID"
              >
                <el-select
                  placeholder="请选择"
                  v-model="form.subjectID"
                  @change="hSubchange"
                >
                  <el-option
                    v-for="item in subjectList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="二级目录"
                prop="catalogID"
              >
                <el-select
                  placeholder="请选择"
                  v-model="form.catalogID"
                >
                  <el-option
                    v-for="item in directoryList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!--  -->
            <el-col :span="6">
              <el-form-item
                label="标签"
                prop="tags"
              >
                <el-select
                  placeholder="请选择"
                  v-model="form.tags"
                >
                  <el-option
                    v-for="(item,index) in tagsList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!--  -->
            <el-col :span="6">
              <el-form-item
                label="关键字"
                prop="keyword"
              >
                <el-input
                  placeholder="根据题干搜索"
                  v-model="form.keyword"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="7">
            <el-col :span="6">
              <el-form-item
                label="试题类型"
                prop="questionType"
              >
                <el-select
                  placeholder="请选择"
                  v-model="form.questionType"
                >
                  <el-option
                    v-for="item in questionType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="难度"
                prop="difficulty"
              >
                <el-select
                  placeholder="请选择"
                  v-model="form.difficulty"
                >
                  <el-option
                    v-for="item in difficulty"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="方向"
                prop="direction"
              >
                <el-select
                  placeholder="请选择"
                  v-model="form.direction"
                >
                  <el-option
                    v-for="(item,index) in direction"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="录入人"
                prop="creatorID"
              >
                <el-select
                  placeholder="请选择"
                  v-model="form.creatorID"
                >
                  <el-option
                    v-for="item in userList"
                    :key="item.id"
                    :label="item.username"
                    :value="item.username"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="7">
            <el-col :span="6">
              <el-form-item
                label="题目备注"
                prop="remarks"
              >
                <el-input v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="企业简称"
                prop="remarks"
              >
                <el-input v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item
                label="省"
                prop="province"
              >
                <el-select
                  placeholder="请选择"
                  @change="hProvince"
                  v-model="form.province"
                >
                  <el-option
                    v-for="(item,index) in citySelect.province"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="2">
              <el-select
                placeholder="请选择"
                v-model="form.city"
              >
                <el-option
                  v-for="(item,index) in citySelect.cityDate"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>

            <el-col :span="6">
              <el-form-item style="text-align:right">
                <el-button @click="hRemove('form')">清除</el-button>
                <el-button
                  type="primary"
                  @click="hSearch"
                >搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- tabs -->
        <el-radio-group
          v-model="form.chkState"
          @change="hSearch"
        >
          <el-radio-button :label="null">全部</el-radio-button>
          <el-radio-button :label="0">待审核</el-radio-button>
          <el-radio-button :label="1">已审核</el-radio-button>
          <el-radio-button :label="2">已拒绝</el-radio-button>
        </el-radio-group>

        <!-- Alert 提示 -->
        <el-alert
          :title="alertText"
          type="info"
          show-icon
          :closable="false"
          style="margin:20px 0"
        >
        </el-alert>

        <!-- table -->

        <el-table
          :data="dataList"
          :key="tableKey"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          fit
          border
          style="width: 100%"
        >
          <el-table-column
            align="center"
            label="试题编号"
            width="150"
          >
            <template slot-scope="scope">
              <span>{{scope.row.number}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="学科"
            width="120"
          >
            <template slot-scope="scope">
              <span>{{scope.row.subject}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="目录"
            width="120"
          >
            <template slot-scope="scope">
              <span>{{scope.row.catalog}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="题型"
            width="50"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.questionType == 1">单选</span>
              <span v-else-if="scope.row.questionType == 2">多选</span>
              <span v-else-if="scope.row.questionType == 3">简答</span>
            </template>
          </el-table-column>
          <el-table-column
            label="题干"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="录入时间"
            width="120"
          >
            <template slot-scope="scope">
              <span>{{scope.row.addDate | parseTimeByString}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="难度"
            width="120"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty == 1">简单</span>
              <span v-else-if="scope.row.difficulty == 2">一般</span>
              <span v-else-if="scope.row.difficulty == 3">困难</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="录入人"
            width="120"
          >
            <template slot-scope="scope">
              <span>{{scope.row.creator}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="审核状态"
            width="120"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.chkState == 0">待审核</span>
              <span v-else-if="scope.row.chkState == 1">通过</span>
              <span v-else-if="scope.row.chkState == 2">拒绝</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="审核意见"
            width="120"
          >
            <template slot-scope="scope">
              <span>{{scope.row.chkRemarks}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="审核人"
            width="120"
          >
            <template slot-scope="scope">
              <span>{{scope.row.chkUser}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="发布状态"
            width="120"
          >
            <template slot-scope="scope">
              <span>{{scope.row.chkState === 1 ? '已发布':'未发布'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="270"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="hPreview(scope.row.id)"
              >预览</el-button>
              <el-button
                type="text"
                @click="hExamine(scope.row)"
                :disabled='scope.row.chkState===2?true:false'
              >审核</el-button>
              <el-button
                :disabled='scope.row.publishState===1?true:false'
                type="text"
                @click="hUpdateQuestion(scope.row.id)"
              >修改</el-button>
              <el-button
                type="text"
                @click="handelPublish(scope.row)"
                :loading='listLoading'
              >

                <span>{{scope.row.publishState == 1 ? '下架':'上架'}}</span>
              </el-button>
              <el-button
                type="text"
                @click="hDel(scope.row.id)"
                :disabled='scope.row.publishState === 1 ? true : false'
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div style="overflow: hidden; margin-top:20px">
          <el-pagination
            background
            style="float:right;"
            @size-change="handleSizeChange"
            layout=" prev, pager, next, sizes,jumper"
            :page-size="formPage.pagesize"
            :page-sizes="[5,20,30,50]"
            :total="total"
            @current-change="pageChange"
          >
          </el-pagination>
        </div>
      </el-card>

      <!-- 审核弹层 -->
      <el-dialog
        title="题目审核"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="30%"
      >
        <Check
          v-if="dialogVisible"
          :formChk='fomrChk'
          @close='dialogVisible = false'
          @update='hUpdate'
        />
      </el-dialog>

      <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="showDialog"
        title="试题预览"
        :visible.sync="showDialog"
        width="60%"
      >
        <Prestions
          @close='showDialog = false'
          :questionId='questionId'
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { simple as list } from '@/api/hmmm/subjects'
import { simple as dirList } from '@/api/hmmm/directorys'
import { list as userList } from '@/api/base/users'
import { simple } from '@/api/hmmm/tags'
import { choice, remove, choicePublish } from '@/api/hmmm/questions'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys.js'
import Check from '@/module-hmmm/components/questions-check.vue'
import Prestions from '@/module-hmmm/components/questions-preview'
export default {
  components: {
    Check,
    Prestions
  },
  data () {
    return {
      form: {}, // 绑定的数据项
      formPage: {
        page: 1, // 当前页数
        pagesize: 5 // 每页显示条数
      },
      fomrChk: {
        chkState: '', // 审核状态
        id: '' // 当前点击的id
      },
      alertText: '', // 总条数
      total: 0, // 总条数
      dataList: [], // 数据列表
      dialogVisible: false, // 审核弹层
      subjectList: [], // 学科目录
      directoryList: [], // 二级目录
      tagsList: [], // 标签列表
      userList: [], // 用户列表
      citySelect: {
        province: [], // 省
        cityDate: [] // 市
      },
      tableKey: 0,
      listLoading: false, // 加载状态
      showDialog: false, // 试题预览弹层
      questionId: 0 // 题目详情id
    }
  },
  created () {
    this.selectedList()
    this.getSubjectList()
    this.getUserList()
    this.getCityData()
  },
  computed: {
    // 题型
    questionType () {
      return questionType
    },
    // 难度
    difficulty () {
      return difficulty
    },
    // 方向
    direction () {
      return direction
    }
  },
  methods: {
    // 获取数据
    async selectedList (params) {
      this.listLoading = true
      console.log(params)
      const res = await choice({ ...this.formPage, ...this.form, ...params })
      console.log(res.data)
      this.dataList = res.data.items // 拿到数据
      this.total = res.data.counts // 总条数
      this.alertText = `共有${this.total}条记录`
      this.listLoading = false
    },
    // 删除
    async doDel (id) {
      console.log(id)
      try {
        const res = await remove({ id: id })
        console.log(res)
        this.$message.success('删除成功') // 请提示
        if (this.dataList.length === 1) {
          this.formPage.page--
          if (this.formPage.page === 0) {
            this.formPage.page = 1
          }
        }
        this.selectedList() // 重新发请求,
      } catch (err) {
        this.$message.error(err)
      }
    },
    // 上下架
    async handelPublish (row) {
      this.listLoading = true
      var data = {
        id: row.id,
        publishState: row.publishState === 1 ? 0 : 1
      }
      await choicePublish(data)
      this.$message.success('修改状态成功')
      row.publishState = row.publishState === 1 ? 0 : 1
      this.selectedList(this.form)
      this.listLoading = false
    },
    // 获取学科列表
    async getSubjectList () {
      const res = await list()
      console.log('学科', res)
      this.subjectList = res.data
    },
    // 二级联动
    async hSubchange (val) {
      // console.log(val)
      // 获取学科列表
      const res = await dirList({ subjectID: val })
      console.log('目录', res)
      this.directoryList = res.data

      // 获取标签简单列表
      const tagsRes = await simple({ subjectID: val })
      console.log(tagsRes)
      this.tagsList = tagsRes.data
    },
    // 获取用户列表
    async getUserList () {
      const res = await userList()
      console.log(res.data.list)
      this.userList = res.data.list
    },
    // 搜索
    hSearch () {
      this.formPage.page = 1
      this.selectedList(this.form)
    },
    // 清除
    hRemove (formName) {
      this.$refs[formName].resetFields()
      this.form = {}
      this.citySelect.cityDate = []
      this.directoryList = []
      this.tagsList = []
      this.selectedList()
    },
    // 获取省
    getCityData () {
      this.citySelect.province = provinces()
    },
    // 二级联动,选省后请求省下地区
    hProvince (val) {
      this.citySelect.cityDate = citys(val)
      this.form.city = this.citySelect.cityDate[0]
    },
    // 审核
    hExamine (row) {
      this.dialogVisible = true
      this.fomrChk = row
      console.log(row)
    },
    // 翻页
    async pageChange (curPage) {
      this.formPage.page = curPage // 修改当前页数
      const res = await choice(this.formPage)
      console.log(res.data)
      this.dataList = res.data.items // 拿到数据
      this.total = res.data.counts // 总条数
      this.alertText = `共有${this.total}条记录`
    },
    // 调整每页数量
    handleSizeChange (val) {
      this.formPage.pagesize = val
      if (this.formPage.page === 1) {
        this.selectedList(this.form)
      }
    },
    // 删除
    hDel (id) {
      this.$confirm('您确定删除吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 2.发请求,删除数据
        this.doDel(id)
      }).catch(() => {

      })
    },
    // 审核完成后关闭弹框,重新请求数据
    hUpdate () {
      this.dialogVisible = false
      this.selectedList()
    },
    // 修改,跳转到试题录入
    hUpdateQuestion (id) {
      this.$router.push({
        path: 'new',
        query: {
          id: id
        }
      })
    },
    hPreview (id) {
      this.showDialog = true // 显示弹层
      this.questionId = id
    }
  }
}
</script>

<style scoped lang='scss'>
.row {
  margin: 20px 0px 20px 0px;
}
</style>
